<template>
    <div class="workbench">
      <div class="xx"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="yi">
          <div class="div1">今日信息</div>

          <div class="divjryy">今日预约人数:{{ this.ss }}</div>

          <div class="divjryy1">今日评估人数:{{ this.tsb }}</div>

          <!--   <div class="divjryy2">今日未执行:{{this.tme2}}</div>

         <div class="divjryy3">今日已执行:{{this.tme1}}</div> -->
        </div>

        <div class="er">
          <div class="div2">汇总</div>
          <div class="divjryy">预约人数:{{ this.ss1 }}</div>

          <div class="divjryy1">评估人数:{{ this.tsb1 }}</div>
          <!-- 
        <div class="divjryy2">未执行:{{this.tme4}}</div>

         <div class="divjryy3">已执行:{{this.tme3}}</div> -->
        </div>

        <div class="san">
          <div class="div3">平台概括</div>
          <div class="pt1">
            <template>
              <i
                class="el-icon-s-order"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg10">评估问卷</div>

              <div class="pgfen">份</div>
              <div class="pgfen1">{{ this.TQuse }}</div>
            </template>
          </div>
          <div class="pt2">
            <template>
              <i
                class="el-icon-location-outline"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg10">干预追踪</div>
              <div class="pgfen">人</div>
              <div class="pgfen1">{{ this.t_followCount }}</div>
            </template>
          </div>
          <div class="pt3">
            <template>
              <i
                class="el-icon-s-custom"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg10">预约人数</div>
              <div class="pgfen">人</div>
              <div class="pgfen1">{{ this.ss1 }}</div>
            </template>
          </div>

          <div class="pt4">
            <template>
              <i
                class="el-icon-reading"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg10">干预方案</div>

              <div class="pgfen">份</div>
              <div class="pgfen1">{{ this.Tcou }}</div>
            </template>
          </div>
        </div>

        <div class="si">
          <div class="div4">会员统计</div>

          <div class="pt1">
            <template>
              <i
                class="el-icon-circle-plus-outline"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg11">今日新增会员</div>
              <div class="pgfen">人</div>
              <div class="pgfen1">{{ this.Tmecount1 }}</div>
            </template>
          </div>

          <div class="pt2">
            <template>
              <i
                class="el-icon-s-custom"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>

              <div class="pg11">今日登录会员</div>
              <div class="pgfen">人</div>
              <div class="pgfen1">{{ this.bb }}</div>
            </template>
          </div>

          <div class="pt3">
            <template>
              <i
                class="el-icon-s-custom"
                style="font-size: 50px; color: #ffffff; margin-right: 150px"
              ></i>
              <div class="pg10">会员总数</div>
              <div class="pgfen">人</div>
              <div class="pgfen1">{{ this.Tmecount }}</div>
            </template>
          </div>
        </div>
      </div>

      <div class="x">
        <span class="l">健康系统流畅图片</span>
      </div>
      <div class="img">
        <img id="u522_img" class="img" src="../../../img/gong.png" />
      </div>
    </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data() {
    return {
      ss: "",
      tsb: "",
      ss1: "",
      tsb1: "",
      tme1: "",
      tme2: "",
      tme3: "",
      tme4: "",
      TQuse: "",
      bb: "",
      Tcou: "",
      Tmecount: "",
      Tmecount1: "",
      t_followCount: "",
      loading:true,
    };
  },
  created() {
    axios.get("/api/yuyuecgAll").then((data) => {
      data.data.forEach((element) => {
        this.ss = element.ss;
      });
    });

    axios.get("/api/yuyuecgAll1").then((data) => {
      data.data.forEach((element) => {
        this.ss1 = element.ss1;
      });
    });

    axios.get("/api/TboDyTypeAll").then((data) => {
      data.data.forEach((element) => {
        this.tsb = element.tsk;
      });
    });

    axios.get("/api/TboDyTypeAll1").then((data) => {
      data.data.forEach((element) => {
        this.tsb1 = element.tsk1;
      });
    });

    axios.get("/api/t_member_exam0").then((data) => {
      data.data.forEach((element) => {
        this.tme2 = element.tme2;
      });
    });

    axios.get("/api/t_member_exam1").then((data) => {
      data.data.forEach((element) => {
        this.tme1 = element.tme1;
      });
    });

    axios.get("/api/t_member_exam3").then((data) => {
      data.data.forEach((element) => {
        this.tme3 = element.tme3;
      });
    });

    axios.get("/api/t_member_exam4").then((data) => {
      data.data.forEach((element) => {
        this.tme4 = element.tme4;
      });
    });

    axios.get("/api/TQusetionEvalluasiAllList").then((data) => {
      console.log(data);
      data.data.forEach((element) => {
        this.TQuse = element.tquse;
      });
    });

    axios.get("/api/logtodayByAll").then((data) => {
      data.data.forEach((element) => {
        this.bb = element.logtoday2;
      });
    });

    axios.get("/api/count").then((data) => {
      data.data.forEach((element) => {
        this.Tcou = element.tcou;
      });
    });

    axios.get("/api/Tmecount").then((data) => {
      data.data.forEach((element) => {
        this.Tmecount = element.tmecount;

        setTimeout(() => {
          this.loading=false;
        }, 1000);
      });
    });

    axios.get("/api/TmecountData").then((data) => {
      data.data.forEach((element) => {
        this.Tmecount1 = element.tmecount1;
      });
    });

    axios.get("/api/t_followCount").then((data) => {
      data.data.forEach((element) => {
        this.t_followCount = element.t_followCount;
      });
    });
  },
});
</script>


<style scoped>
.pgfen1 {
  margin-right: 130px;
  margin-top: -45px;
  margin-left: 183px;
  color: rgb(255, 255, 255);
}
.pgfen {
  margin-right: 130px;
  margin-top: -45px;
  margin-left: 180px;
  color: rgb(255, 255, 255);
}
.pg11 {
  margin-right: 130px;
  margin-top: 20px;
}
.pg10 {
  margin-right: 150px;
  margin-top: 20px;
}
.pt2 {
  top: 40px;
  left: 300px;
  border: 1px solid rgb(255, 255, 255);
  width: 230px;
  height: 100px;
  background-color: rgba(15, 161, 224, 0.66);
  position: absolute;
  border-radius: 4px;
}

.pt3 {
  top: 180px;
  left: 20px;
  border: 1px solid rgb(255, 255, 255);
  width: 230px;
  height: 100px;
  background-color: rgba(15, 161, 224, 0.66);
  position: absolute;
  border-radius: 4px;
}

.pt4 {
  top: 180px;
  left: 300px;
  border: 1px solid rgb(255, 255, 255);
  width: 230px;
  height: 100px;
  background-color: rgba(15, 161, 224, 0.66);
  position: absolute;
  border-radius: 4px;
}
.pt1 {
  top: 40px;
  left: 20px;
  border: 1px solid rgb(255, 255, 255);
  width: 230px;
  height: 100px;
  background-color: rgba(15, 161, 224, 0.66);
  position: absolute;
  border-radius: 4px;
}

.divjryy1 {
  position: absolute;
  height: 26px;
  top: 40px;
  left: 300px;
}

.divjryy2 {
  position: absolute;
  height: 26px;
  top: 80px;
  text-align: center;
}

.divjryy3 {
  position: absolute;
  height: 26px;
  top: 80px;
  left: 300px;
}

.divjryy {
  position: absolute;
  height: 26px;
  top: 40px;
  text-align: left;
}

.div1 {
  position: absolute;
  color: rgb(255, 255, 255);
  width: 600px;
  height: 26px;
  text-align: left;
  background-color: rgba(25, 158, 216, 1);
}
.div2 {
  position: absolute;
  color: rgb(255, 255, 255);
  width: 700px;
  height: 26px;
  text-align: left;
  background-color: rgba(25, 158, 216, 1);
}
.div3 {
  position: absolute;
  color: rgb(255, 255, 255);
  width: 600px;
  height: 26px;
  text-align: left;
  background-color: rgba(25, 158, 216, 1);
}
.div4 {
  position: absolute;
  color: rgb(255, 255, 255);
  width: 700px;
  height: 26px;
  text-align: left;
  background-color: rgba(25, 158, 216, 1);
}
.xx {
  position: absolute;
  width: 1400px;
  height: 830px;
  border: 1px solid #000;
  right: 80px;
  top: 115px;
}

.img {
  position: absolute;
  height: "250";

  top: 310px;

  left: 120px;
}

.x {
  position: absolute;
  top: 580px;
  right: 127px;
  height: 36px;
  width: 1340px;
  background-color: rgba(25, 158, 216, 1);
}
.l {
  font-size: 25px;
  color: rgb(255, 255, 255);
}
.yi {
  position: absolute;
  width: 600px;
  height: 120px;
  top: 15px;
  left: 10px;
  border: 1px solid #000;
  border-radius: 0px;
}
.er {
  position: absolute;
  width: 700px;
  height: 120px;
  top: 15px;
  left: 650px;
  border: 1px solid #000;
  border-radius: 0px;
}

.san {
  position: absolute;
  width: 600px;
  height: 290px;
  top: 160px;
  left: 10px;
  border: 1px solid #000;
  border-radius: 0px;
}

.si {
  position: absolute;
  width: 700px;
  height: 290px;
  top: 160px;
  left: 650px;
  border: 1px solid #000;
  border-radius: 0px;
}
</style>